<template>
  <div>
    <Head :name="name" ></Head>
    <van-search
  v-model="value"
  shape="round"
  placeholder="查询图书馆"
  @keydown.enter="search"
/>
<div>
  <div v-for="item in list" :key="item.id" class="list"  style="background-color:white;margin:10px auto;width: 90%;border-radius: 10px;">
<div class="img"><img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt=""></div>
<div class="message" @click="to(item.id)">
  <div class="name">{{item.name}}</div>
  <div class="address">地址：{{item.address}}</div>
  <div class="time">营业时间{{item.businessHours}}</div>
</div>
  </div>
</div>
  </div>
</template>

<script>
import {librarylist} from "./service"
import  Head  from "./libraryView/headView.vue"
export default {
  methods:{
    to(id){
      this.$router.push({path:"/libraryDetail",query:{id:id}})
    }
  },
  data(){
    return{
      list:[],
      value:'',
      name:'图书馆'
    }
  },
  components:{
Head,
  },
async created(){
  let res = await librarylist()
  this.list=res.data.rows
  console.log(this.list);
}
}
</script>

<style lang="scss" scoped>
.list{
  display: flex;
  padding: 10px;
  justify-content: space-between;
  .img{
    margin-top: 10px;
    
  height: 70px;
  width: 70px;
  border-radius: 10px;
overflow: hidden;
  img{
    width: 100%;
    height: 100%;
  }
}
.message{
  width: 68%;
  border: 1px solid rgb(212, 209, 209);
  border-radius: 10px;
  padding: 10px;
  .address{
  font-size: 16px;
  color: #999;
}
.time{
  font-size: 16px;
  color: #999;
}
}

}

</style>